@use '@material/menu-surface/mixins' as mdc-menu-surface;
@use '@material/list/mixins' as mdc-list;
@use '../../cdk/a11y/a11y';
@use '../mdc-helpers/mdc-helpers';

@include mdc-menu-surface.core-styles($query: structure);

// Note that the `.mdc-menu-surface` is here in order to bump up the specificity
// and avoid interference with `mat-menu` which uses the same mixins from MDC.
.mdc-menu-surface.mat-mdc-autocomplete-panel {
  width: 100%; // Ensures that the panel matches the overlay width.
  max-height: 256px; // Prevents lists with a lot of option from growing too high.
  position: static; // MDC uses `absolute` by default which will throw off our positioning.
  visibility: hidden;
  // MDC sets the transform-origin programmatically based on whether the dropdown is above or
  // below the input. We use our own positioning logic, so we need to set this ourselves.
  transform-origin: center top;

  // Note that we include this private mixin, because the public
  // one adds a bunch of styles that we aren't using for the menu.
  @include mdc-list.deprecated-base_($query: structure);
  @include a11y.high-contrast(active, off) {
    outline: solid 1px;
  }

  .cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) & {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .mat-mdc-autocomplete-panel-above & {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    // MDC sets the transform-origin programmatically based on whether the dropdown is above or
    // below the input. We use our own positioning logic, so we need to set this ourselves.
    transform-origin: center bottom;
  }

  // These classes are used to toggle the panel visibility depending on whether it has any options.
  &.mat-mdc-autocomplete-visible {
    visibility: visible;
  }

  &.mat-mdc-autocomplete-hidden {
    visibility: hidden;
  }
}

// Prevent the overlay host node from affecting its surrounding layout.
mat-autocomplete {
  display: none;
}
